<template>
	<view class="content" :style="{
      'padding-top': height + 'px',
    }">
		<view :style="{
        height: statusBarHeight + 'px',
      }">
		</view>
		<view class="head" :style="{
        top: statusBarHeight + 'px',
      }">
			<view class="head_left">
				<u-icon name="arrow-left" color="#444444" size="24" :bold="true" @click="toBack"></u-icon>
			</view>
			<view class="text">我的大成</view>
			<view class="head_right">
				<view class="show" @click="creates">
					<image src="@/static/images/slices/icon_wddc_tianjia.png" mode=""></image>
				</view>
				<view class="zhuan">
					<image src="@/static/images/slices/icon_bai_zhunfa.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box_au">
				<view class="au">
					<view class="au_title"> 华胥星球：巴蜀之都江堰-老子 </view>
					<!-- <view class="au_progress_bar">
						<view class="progress_btn" @click="playAudio">
							<image src="@/static/images/icon_wddc_yinpin_zhanting.png" v-show="playFlag" mode="">
							</image>
							<image v-show="!playFlag" src="@/static/images/icon_wddc_yinpin_bofang.png" mode=""></image>
						</view>
						<view class="progress_bar">
							<view class="progress_bar_action" :style="{
                  width: `${progressBarLeft}%`,
                }">
							</view>
							<view class="progress_bar_dian" :style="{
                  left: `${progressBarLeft}%`,
                }">
								<audio style="text-align: left" :src="src" @timeupdate="timeupdate" id="au"></audio>
							</view>
						</view>
					</view> -->
					<progress-bar></progress-bar>
					<!-- <view class="progress_num">
						<view>
							{{currentDuration}}
						</view>
						<view>
							{{totalDuration}}
						</view>
					</view> -->
				</view>
			</view>
			<view class="h"> </view>
			<view class="operate">
				<view class="operate_tabs">
					<u-tabs class="tabs" :list="list1" @click="click" :activeStyle="{
              color: '#444',
              fontWeight: 'bold',
              transform: 'scale(1.05)',
              'font-size': '32rpx',
            }" lineColor="#444444" :inactiveStyle="{
              color: '#888888',
              transform: 'scale(1)',
              'font-size': '32rpx',
            }" :scrollable="false"></u-tabs>
					<view class="operate_content" v-if="currentIndex == 0">
						<reviewContent :reply="false" :text="'期待上线啊，抢第一批去看！'"></reviewContent>
						<reviewContent :text="'期待上线啊，抢第一批去看！'"></reviewContent>
					</view>
					<view class="operate_content" v-else>
						<view class="operate_item" v-for="item in 3">
							<view class="item_left">
								<image src="@/static/images/juxing96.png" mode=""></image>
							</view>
							<view class="item_right">
								<view class="right_title"> 读万卷书 行万里路 — 读书打卡 </view>
								<view class="right_participate">
									去参与
									<u-icon name="arrow-right" color="#ADADAD" size="18"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :actions="list" cancelText="取消" @select="selectClick" :show="show"></u-action-sheet>
		<floatingBall></floatingBall>
	</view>
</template>

<script>
	import reviewContent from "@/components/search/reviewContent.vue"; //评论
	import progressBar from "@/pages/components/progress_bar.vue"
	export default {
		components: {
			reviewContent,
			progressBar
		},
		data() {
			return {
				statusBarHeight: 0,
				height: 0,
				currentIndex: 0,
				show:false,
				list: [{
						name: '创建星球'
					},
					{
						name: '创建微创'
					}
				],
				list1: [{
						name: "互动",
					},
					{
						name: "其他",
					},
				],
				audio: null,
				src: "https://huaxuxingqiu.demo.benfusite.com/uploads/10001/20231109/54fa42cae7c5ed18a382b2141ab13c47.mp3",
				playFlag: false,
				duration: 0,
				times: 0,
				progressBarLeft: 0,
				totalDuration: 0,
				currentDuration: "00:00",
			};
		},
		created() {
			const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

			this.statusBarHeight = statusBarHeight.statusBarHeight;
			this.$nextTick(() => {
				uni
					.createSelectorQuery()
					.select(".head")
					.boundingClientRect((data) => {
						this.height = data.height;
					})
					.exec();
			});
		},
		onLoad() {
			this.audio = uni.createInnerAudioContext();
			this.audio.autoplay = true;
			this.getFileInfo();
		},
		methods: {
			getFileInfo() {
				this.audio = uni.createInnerAudioContext();
				this.audio.src = this.src;
				this.audio.onCanplay(() => {
					var time = this.audio.duration.toFixed(0);
					var min = Math.floor(time / 60);
					var second = time % 60;
					this.duration = second;
					this.times = time;
					this.totalDuration = `${min < 10?`0${min}`:min}:${second < 10?`0${second}`:second}`;
				});
				this.audio.onTimeUpdate((res) => {
					this.progressBarLeft = (this.audio.currentTime / this.times) * 100;
					var min = Math.floor(this.audio.currentTime / 60);
					var second = Math.floor(this.audio.currentTime % 60);
					this.currentDuration = `${min < 10?`0${min}`:min}:${second < 10?`0${second}`:second}`;
				});
			},
			playAudio() {
				let Audio = this.audio;
				let that = this;
				if (this.playFlag) {
					//当前正在播放，切换效果，暂停播放
					this.playFlag = false;
					Audio.pause();
					// console.log('this.audioList[i].duration',this.chatRecordList[i].duration)
					// this.duration = this.chatRecordList[i].duration;
					// Audio.offCanplay();
					Audio.offTimeUpdate();
					console.log("点击正在播放的语音，暂停播放");
					return;
				}
				this.playFlag = true;
				Audio.src = this.src; //音频地址
				Audio.play(); //执行播放
				Audio.onPlay(function() {
					console.log("开始播放");
				});

				Audio.onError((res) => {
					that.playFlag = false;
					uni.showToast({
						title: res.errCode + "," + res.errMsg,
						icon: "none",
					});
				});
				Audio.onPause(function() {
					console.log("pause");
					that.playFlag = false;
				});
				Audio.onEnded(function() {
					console.log("end", that.times);
					that.playFlag = false;
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			timeupdate(e) {
				console.log("eeeee", e);
			},
			click(e) {
				this.currentIndex = e.index;
			},
			creates() {
				this.show = true;
			},
			selectClick(e) {
				console.log('eeee',e);
				if(e.name == '创建微创') {
					uni.navigateTo({
						url:"/pages/bigResult/minute_create"
					})
				}
				this.show = false;
			}
		},
	};
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		padding: 18rpx 30rpx 47rpx;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		z-index: 99;
		background: #fff;

		.head_left {
			position: absolute;
			left: 30rpx;
		}

		.head_right {
			position: absolute;
			right: 30rpx;
			display: flex;
		}

		.text {
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 400;
			color: #444444;
		}
	}

	.show {
		width: 40rpx;
		height: 38rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zhuan {
		width: 40rpx;
		height: 38rpx;
		margin-left: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		width: 100%;

		.box_au {
			width: 100%;
			padding: 40rpx 30rpx;
			box-sizing: border-box;

			.au {
				width: 100%;
				background: #f7f8fa;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				padding: 32rpx;

				box-sizing: border-box;

				.au_title {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #444444;
				}

				.au_progress_bar {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 32rpx;

					.progress_btn {
						width: 34rpx;
						height: 34rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.progress_bar {
						// width: 572rpx;
						flex: 1;
						height: 8rpx;
						background: #d8d8d8;
						border-radius: 4rpx;
						margin-left: 25rpx;
						position: relative;

						.progress_bar_action {
							height: 8rpx;
							background: #55b877;
							border-radius: 4rpx;
						}

						.progress_bar_dian {
							width: 30rpx;
							height: 30rpx;
							background: #55b877;
							border-radius: 50%;
							position: absolute;
							left: 50%;
							top: -10rpx;
						}
					}
				}

				.progress_num {
					width: 100%;
					padding-left: 60rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					font-weight: 500;
					color: #444444;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}

		.h {
			width: 100%;
			height: 16rpx;
			background: #f7f8fa;
		}

		.operate {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.operate_tabs {
				border-bottom: 1rpx solid #eee;
			}

			.operate_content {
				width: 100%;

				.operate_item {
					width: 100%;
					margin-top: 32rpx;
					background: #f7f8fa;
					padding: 16rpx 30rpx 16rpx 16rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					box-sizing: border-box;
					display: flex;

					.item_left {
						width: 168rpx;
						height: 168rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item_right {
						flex: 1;
						padding: 8rpx 0 8rpx 32rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.right_title {
							font-size: 30rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #444444;
						}

						.right_participate {
							display: flex;
							justify-content: flex-end;
							font-size: 28rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							color: #55b877;
						}
					}
				}
			}
		}
	}
</style>